<template>
	<view>
		<view class="top">
			<input type="text" value="" placeholder="搜索" v-model="keyword" @input="search"/>
			<image src="../../static/search_b.png" mode=""></image>
		</view>
		
		<view class="content">
			<uni-list>
				<!-- <uni-list-chat :avatar-circle="true" title="张三" avatar="https://vkceyugu.cdn.bspapp.com/VKCEYUGU-dc-site/460d46d0-4fcc-11eb-8ff1-d5dcf8779628.png" note="您收到一条新的消息" time="2020-02-02 20:20" badge-text="dot" :clickable="true" :to="`./chat?isDoc=`+isDoc+`&uid=11&nick=张三&avatar=https://vkceyugu.cdn.bspapp.com/VKCEYUGU-dc-site/460d46d0-4fcc-11eb-8ff1-d5dcf8779628.png`" v-if="isDoc==1"></uni-list-chat> -->
				<!-- <uni-list-chat :avatar-circle="true" title="李测试" avatar="https://vkceyugu.cdn.bspapp.com/VKCEYUGU-dc-site/460d46d0-4fcc-11eb-8ff1-d5dcf8779628.png" note="您收到一条新的消息" time="2020-02-02 20:20" badge-text="dot" :clickable="true" :to="`./chat?isDoc=`+isDoc+`&uid=10&nick=李测试&avatar=https://vkceyugu.cdn.bspapp.com/VKCEYUGU-dc-site/460d46d0-4fcc-11eb-8ff1-d5dcf8779628.png`" v-else></uni-list-chat> -->

				<uni-list-chat v-for="item in chatList" :key="item.id" :avatar-circle="true" :title="item.nick" :avatar="item.avatar" :note="item.note" :time="item._time" :badge-text="item.noread>99?'···':item.noread" :to="`/pagesA/message/chat?isDoc=`+isDoc+`&cate=`+item.cate+`&orderno=`+item.orderno"></uni-list-chat>
			</uni-list>
			
			<block v-if="chatList.length<=0">
				<view style="text-align: center;margin-top: 40rpx;font-size: 26rpx;color:#999;">
					<block v-if="loading">正在加载~</block>
					<block v-else>{{keyword?'未搜索到相关消息~':'暂无消息~'}}</block>
				</view>
			</block>
		</view>

		<ComTabBar :selected="2" v-if="isDoc==0"></ComTabBar>
		<ComTabBarDoc :selected="1" v-else-if="isDoc==1"></ComTabBarDoc>
		<view></view>
	</view>
</template>

<script>
	import ComTabBar from '@/components/ComTabBar.vue';
	import ComTabBarDoc from '@/components/ComTabBarDoc.vue';
	export default {
		components: {
			ComTabBar,
			ComTabBarDoc,
		},
		data() {
			return {
				isDoc: -1,
				
				imStatus: {
					// Socket连接状态
					IsOpen: false,
					// SocketTask
					SocketTask: false,
					// 是否上线
					IsOnline: false,
				},
				chatList: [],
				keyword: "",
				loading: true,
			}
		},
		onLoad(option) {
			uni.hideTabBar()
			var that = this
			that.imStatus = {
				// Socket连接状态
				IsOpen: that.$store.state.IsOpen,
				// SocketTask
				SocketTask: that.$store.state.SocketTask,
				// 是否上线
				IsOnline: that.$store.state.IsOnline,
			},
			uni.$on("onImStatus",(rel)=>{
			    console.log('==>>我被全局通知了onImStatus', rel)
			    that.imStatus = rel
			})
		},
		onShow: function() {
			console.log('**********', 'onShow')
			
			this.$Http({
				url: 'getUserInfo',
				type: 'POST',
				data: {}
			}).then(res => {
				
			})
			
			// 
			this.isDoc = -1
			this.chatList = []
			uni.$off("onUpdateChatList")
            uni.$off("onUpdateDocChatList")
			let option = {};
			if(uni.getStorageSync('ComTabBarOption')){
				var ComTabBarOption = uni.getStorageSync('ComTabBarOption')
				let arr = ComTabBarOption.split("&");
				for (let i of arr) {
					option[i.split("=")[0]] = i.split("=")[1];
				}
			}
			if(option.isDoc==1){
				this.isDoc = 1
				this.chatList = this.likeQuery(this.$store.state.chatDocList, this.keyword)
				uni.$on("onUpdateDocChatList",(rel)=>{
	                console.log('我被全局通知了onUpdateDocChatList', rel)
	                this.chatList = this.likeQuery(rel, this.keyword)
	            })
			}else{
				this.isDoc = 0
				this.chatList = this.likeQuery(this.$store.state.chatList, this.keyword)
				uni.$on("onUpdateChatList",(rel)=>{
	                console.log('我被全局通知了onUpdateChatList', rel)
	                this.chatList = this.likeQuery(rel, this.keyword)
	            })
			}
			console.log('chatList',this.chatList)
			this.loading = false
		},
		onReady() { //只加载一次
		},
		onHide(){
			console.log('监听页面隐藏');
		},
		onUnload(){
			console.log('监听页面卸载');
			uni.$off("onImStatus")
		},
		methods:{
			search(){
				this.chatList = this.likeQuery(this.isDoc==1?this.$store.state.chatDocList:this.$store.state.chatList, this.keyword)
			},
			likeQuery(list, keyWord) {
				if(!keyWord) return list
				
			    var reg =  new RegExp(keyWord);
			    var arr = [];
			    for (var i = 0; i < list.length; i++) {
					console.log(list[i])
					if (reg.test(list[i].nick)) {
						arr.push(list[i]);
					}else if (reg.test(list[i].note)) {
						arr.push(list[i]);
					}
			    }
			    return arr;
			}
		}
	}
</script>

<style lang="scss">
	page{
		padding-bottom: constant(safe-area-inset-bottom);
		padding-bottom: env(safe-area-inset-bottom);
	}
	.top{
		position: fixed;
		padding: 0 30rpx;
		width: 100%;
		height: 80rpx;
		z-index: 99;
		background-color: #fff;
		border-bottom: 1px solid #f7f7f7;
		
		input{
			background-color: #f7f7f7;
			height: 60rpx;
			border-radius: 60rpx;
			font-size: 28rpx;
			padding-left: 74rpx;
			padding-right: 20rpx;
		}
		image{
			position: absolute;
			width: 40rpx;
			height: 40rpx;
			top: 10rpx;
			left: 50rpx;
		}
	}
	
	.content{
		padding-top: 80rpx;
		padding-bottom: 120rpx;
	}
	
	.lj-emoji{
		width: 40rpx;
		height: 40rpx;
	}
</style>
